// 面向过程编程

// 公共属性发布
var obj = [{
    x: 2,
    y: 0
}, {
    x: 1,
    y: 0
}, {
    x: 0,
    y: 0
}]
var map = document.getElementById('bigBox');
var width = 20;
var height = 20;
var keyDownAnswer = 'right';
var timer;
var stop = document.getElementById('stop');
stop.onclick = function () {
    clearInterval(timer);
}
var start = document.getElementById('start');
start.onclick = function () {
    timer = setInterval(function () {
        run();
    }, 100)     
    // 调用随机数生成的方法
    // foundFood() //setInterval属于异步执行的代码块，会先执行随机的函数，在主线程执行完毕后，在代码块中进行返回

    
}
document.onkeydown = keyDown; //页面上只要有按键点击事件的时候,就会触发keyDown方法
var nub = 0; //用于计数随机数的变量
var randomFoodX; //当前随机数的x轴上的值
var randomFoodY; //当前随机数的Y轴上的值
var foodBlock;   //用来存储食物的元素


// 页面加载完成调用事件
window.onload = function() {
    timer = setInterval(function () {
        run();
    }, 100)     
    // 调用随机数生成的方法
    foundFood() //setInterval属于异步执行的代码块，会先执行随机的函数，在主线程执行完毕后，在代码块中进行返回

}

// 创建一个数组用来存放老的身体
var oldBody = [];

// 页面重新绘制
function display() {
    if (oldBody !== []) {
        console.log('✄ ✄ ✄ ✄ ✄ ✄ ✄ 爷开始删除老东西啦！！！');
        for (let i = 0; i < oldBody.length; i++) {
            map.removeChild(oldBody[i])
        }
        oldBody = [];
    }
    obj.forEach(function (item) {

        console.log('我正在循环身体');

        let div = document.createElement('div');
        div.style.width = width + 'px';
        div.style.height = height + 'px';
        div.style.position = 'absolute';
        div.style.top = item.y * height + 'px';
        div.style.left = item.x * width + 'px';
        div.style.background = 'green';
        div.style.border = '1px solid black';
        // div.id = 'snakBody';
        map.appendChild(div);

        oldBody.push(div);
    });

    // 监听输入数组中的数据是什么？
    console.log('我是存下来的老数据');
    console.log(oldBody); //=====>xy坐标的集合



    console.log('=====================执行完成一次刷新=============================');
}

// 跑起来
function run() {
    eatBeat(); //方法的功能：触碰到食物的时候，对食物的位置判断转换，然后将转换后的xy的数据unshift进入数组中
    console.log('正在执行的方向是：' + keyDownAnswer);
    // 移动起来的时候用第一个的下一个位置给最后一个元素
    // 得到当前的第一个元素的数据
    let first = obj[0];
    let last = {
        x: obj[0].x,
        y: obj[0].y
    };
    console.log('当前的第一个元素的数据为');
    console.log(first);

    // 将当前的对象的最后一个元素炸掉
    obj.pop();
    console.log('清空最后一个元素的obj数据为');
    console.log(obj);

    switch (keyDownAnswer) {
        case 'right':
            last.x += 1;
            console.log(`================>下一个XY的位置是：${obj[0].x},${obj[0].y}`);
            eatBeat(obj[0].x, obj[0].y);
            snakeDie(obj[0].x, obj[0].y);
            break;
        case 'left':
            last.x -= 1;
            console.log(`================>下一个XY的位置是：${obj[0].x},${obj[0].y}`);
            eatBeat(obj[0].x, obj[0].y)
            snakeDie(obj[0].x, obj[0].y);
            break;
        case 'top':
            last.y -= 1;
            console.log(`================>下一个XY的位置是：${obj[0].x},${obj[0].y}`);
            eatBeat(obj[0].x, obj[0].y)
            snakeDie(obj[0].x, obj[0].y);
            break;
        case 'btn':
            last.y += 1;
            console.log(`================>下一个XY的位置是：${obj[0].x},${obj[0].y}`);
            eatBeat(obj[0].x, obj[0].y)
            snakeDie(obj[0].x, obj[0].y);
            break;
    }
    obj.unshift(last);
    console.log('现在的obj的结果为');
    console.log(obj);
    // 重新加载页面
    display();
}


// 键盘点击事件
function keyDown(e) {
    console.log(e.keyCode);

    switch (e.keyCode) {
        case 38:
            keyDownAnswer = 'top';
            break;
        case 40:
            keyDownAnswer = 'btn';
            break;
        case 37:
            keyDownAnswer = 'left';
            break;
        case 39:
            keyDownAnswer = 'right';
            break;
    }
}

// 创建食物的事件
function foundFood() {
    // 在页面中的一个随机的位置生成一个食物
    randomFoodX = Math.floor(Math.random() * ((1200) - 16) + 15);
    randomFoodY = Math.floor(Math.random() * ((600) - 16) + 15);

    if ((randomFoodX) % 20 == 0 && (randomFoodY) % 20 == 0) {
        console.log('✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌');

        console.log(`第${nub}次的时候取到了合适得值`);
        console.log('随机食物的位置是：');
        console.log(randomFoodX + '  ,  ' + randomFoodY);
        console.log('✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌✌');
        // 开始创建食物

        let foodSpan = document.createElement('span');
        foodSpan.style.width = width + 'px';
        foodSpan.style.height = height + 'px';
        foodSpan.style.position = 'absolute';
        foodSpan.style.top = randomFoodY + 'px';
        foodSpan.style.left = randomFoodX + 'px';
        foodSpan.style.background = 'red';
        foodSpan.style.border = '1px solid black';

        foodBlock=foodSpan;

        map.appendChild(foodSpan);

        return;

    } else {
        nub++;
        // 回调
        foundFood();
    }
}

// 创建吃豆豆的事件

function eatBeat(x, y) {
    console.log('+++++++爷要开始吃豆豆啦！！！！++++++++');

    // 得到页面中的位置
    console.log(`豆豆的位置是： ${randomFoodX},,${randomFoodY}`);
    // 转换成XY的数据类型 用一个变量存储
    let changeRandomX = randomFoodX / 20;
    let changeRandomY = randomFoodY / 20;
    
    console.log(`转换后的食物的X，Y 是： ${changeRandomX},,${changeRandomY}`);
    let newBodyOne={x:changeRandomX,y:changeRandomY}

    // 得到当前页面上的xy的下一步的值？  放在run的位置，当run的条件正确，unshift进去。
    if (x == changeRandomX && y == changeRandomY) {
        console.log('✌✌爷吃到啦✌✌');
        obj.unshift(newBodyOne);
        map.removeChild(foodBlock);//删除页面上的旧元素
        foodBlock=null;
        foundFood();//调用页面上随机位置的方法
    }
}



// width: 1200px;
// height: 600px;

// 贪吃蛇死亡的判定
function snakeDie(x, y){
    console.log('☯ ☯ ☯ ☯进入了死亡的判定事件中 ☯ ☯ ☯ ☯');
    if (x*20==1200||y*20==600||x<0||y<0){
        location.reload()
        alert('Don\'t touch boundaries! You Die!!!'); 
        
    }
}



// 触碰身体的死亡条件的判断